/**
 * Created by levy on 2016/12/15
 */
import React from 'react'
import {withRouter} from 'react-router'
import {ajax} from '../util'
import Loading from './Loading'
import Header from './Header'

@withRouter
export default class BudgetList extends React.Component {
    state = {
        list: [],
        loading: true
    }
    componentDidMount() {
        ajax({
            url: '/system/api/v1/modules/multilanguage/BUDGET_MODULES?locale=zh-CN&size=999',
        }, data => {
            let zhCNList = data.payload.content.filter(item => item.LOCALE == 'zh-CN')

            this.setState({list: zhCNList, loading: false})
        }, err => {
            this.setState({loading: false})
            mui.toast('服务器正忙')
        })
    }
    render () {
        return (
            <div className="budget-list">
                <Header title="预算表单模块"/>
                <div className="mui-content">
                    {this.renderList()}
                </div>
                <Loading loading={this.state.loading}/>
            </div>
        )
    }
    renderList = () => {

        return (
            <ul className="mui-table-view">
                {
                    this.state.list.map(item => (
                        <li className="mui-table-view-cell" key={item.ID}
                            onClick={this.toDetail.bind(this, item.ID, item.NAME)}>
                            <a className="mui-navigate-right">
                                {item.NAME}
                            </a>
                        </li>
                    ))
                }
            </ul>
        )
    }
    toDetail(id, title) {
        this.props.router.push({
            pathname: '/budget-detail',
            query: {
                id: id,
                title: title
            }
        })
    }
}

